<template>
  <div>
    <h-row>
      <h-col span="24">
        <h-card shadow>
          <p slot="title">开户信息</p>
          <h-field-panel collapse="false">
            <span slot="title">用户基本信息</span>
            <p>用户类型：{{ user.user_type }}</p>
            <p>用户名：{{ user.name }}</p>
            <p>证件类型：{{ user.identity_card_type }}</p>
            <p>证件号：{{ user.identity_card_id }}</p>
            <p>风险类型：{{ user.preference }}</p>
          </h-field-panel>
          <h-field-panel collapse="false" style="margin-top: 2vh">
            <span slot="title">银行卡信息</span>
            <div v-for="(card, index) in bankCards" :key="index">
              <p>银行卡类型：{{ card.type }}</p>
              <p>银行卡号：{{ card.num }}</p>
            </div>
          </h-field-panel>
        </h-card>
      </h-col>
    </h-row>
    <h-row>
      <h-col span="24" class="button-container">
        <h-button type="primary" @click="pre">上一步</h-button>
        <h-button type="primary" @click="submit" style="margin-left: 2vh"
          >提交</h-button
        >
      </h-col>
    </h-row>

    <h-spin size="large" fix v-if="spinShow">开户中...</h-spin>
  </div>
</template>

<script>
import { myRegister } from "@/api/user";

export default {
  name: "showInfo",
  data() {
    return {
      spinShow: false,
      user: {
        identity_card_id: "",
        user_type: "",
        identity_card_type: "",
        name: "",
        preference: ""
      },
      bankCards: [
        {
          type: "",
          num: ""
        }
      ],
    };
  },
  mounted() {
    //取出数据
    this.user = this.$store.getters["user/userInfo"];
    this.bankCards = this.$store.getters["user/bankCards"];
  },
  methods: {
    pre() {
      //跳转到上一个组件
      this.$store.commit("components/decrementCurrentRegister");
    },
    submit() {
        this.$hMsgBox.confirm({
          title: "确认提交开户吗？",
          content: "点击确认提交开户信息",
          onOk: () => {
            this.register();
          },
          onCancel: () => {
            this.$hMsgBox.info({
              title: "取消提交",
              content: "您已取消提交",
            });
          },
        });
      
    },
    register() {
      this.spinShow = true;
      //提交数据
      console.log(this.user);
      console.log(this.bankCards);
      myRegister({
        user: this.user,
        bankCards: this.bankCards,
      })
        .then((res) => {
          this.spinShow = false;
          console.log(res);
          this.$hMsgBox.success({
            title: "开户成功",
            content: "您已成功开户",
          });
          this.$store.commit("components/incrementCurrentRegister");
          this.$store.commit("user/clear");
        })
        .catch((err) => {
          this.spinShow = false;
          console.log(err);
          this.$store.commit("components/incrementCurrentRegister"); //记得删
          this.$hMsgBox.success({
            title: "开户成功",
            content: "您已成功开户",
          });
          // this.$hMsgBox.error({
          //   title: "开户失败",
          //   content: "开户失败，请重试",
          // });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2vh;
}
</style>